<template>
	<div class="">
		<base-toggle
			v-if="tab === SportsMyBetsTab.cashout"
			icon="history"
			text-t="myBets.time"
			class="w-auto"
			showText
			:checked="cashoutSortByMatchTime"
			@change="cashoutSortByMatchTimeChange"></base-toggle>
		<base-toggle
			v-else-if="tab === SportsMyBetsTab.live"
			icon="history"
			text-t="myBets.time"
			class="w-auto"
			showText
			:checked="liveSortByMatchTime"
			@change="liveSortByMatchTimeChange"></base-toggle>
		<base-toggle
			v-else-if="tab === SportsMyBetsTab.unsettled"
			icon="history"
			text-t="myBets.time"
			class="w-auto"
			showText
			:checked="unsettledSortByMatchTime"
			@change="unsettledSortByMatchTimeChange"></base-toggle>
		<n-date-picker
			v-else-if="tab === SportsMyBetsTab.settled"
			:value="settledDateRange"
			:on-update:value="settledDateRangeChange"
			type="daterange"
			class="w-[255px]"
			clearable />
		<n-date-picker
			v-else-if="tab === SportsMyBetsTab.all"
			:value="allDateRange"
			:on-update:value="allDateRangeChange"
			type="daterange"
			class="w-[255px]"
			clearable />
	</div>
</template>

<script lang="ts" setup>
import { NDatePicker } from 'naive-ui'
import { PropType } from 'vue'
import { SportsMyBetsTab } from './types'
import { BaseToggle } from '@/components/base'

defineProps({
	tab: {
		type: Number as PropType<SportsMyBetsTab>,
		required: true
	},
	cashoutSortByMatchTime: {
		type: Boolean
	},
	liveSortByMatchTime: {
		type: Boolean
	},
	unsettledSortByMatchTime: {
		type: Boolean
	},
	settledDateRange: {
		type: Object as PropType<[number, number] | null>
	},
	allDateRange: {
		type: Object as PropType<[number, number] | null>
	}
})

const emits = defineEmits([
	'update:cashoutSortByMatchTime',
	'update:liveSortByMatchTime',
	'update:unsettledSortByMatchTime',
	'update:settledDateRange',
	'update:allDateRange'
])

const cashoutSortByMatchTimeChange = (val: boolean) => emits('update:cashoutSortByMatchTime', val)

const liveSortByMatchTimeChange = (val: boolean) => emits('update:liveSortByMatchTime', val)

const unsettledSortByMatchTimeChange = (val: boolean) =>
	emits('update:unsettledSortByMatchTime', val)

const settledDateRangeChange = (val: any) => emits('update:settledDateRange', val)

const allDateRangeChange = (val: any) => emits('update:allDateRange', val)
</script>
